<template>
  <div class="medical-record">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />

    <div class="form-content">
      <!-- 基本信息表单 -->
      <van-form @submit="onSubmit">
        <!-- 年龄输入框 -->
        <van-field
          v-model="formData.age"
          name="age"
          label="年龄"
          type="digit"
          placeholder="请输入年龄"
          :rules="[
            { required: true, message: '请输入年龄' },
            { validator: validateAge, message: '年龄必须在1-150岁之间' }
          ]"
        />

        <!-- 性别单选 -->
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="formData.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 身高输入框 -->
        <van-field
          v-model="formData.height"
          name="height"
          label="身高"
          type="digit"
          placeholder="请输入身高(cm)"
          :rules="[
            { required: true, message: '请输入身高' },
            { validator: validateHeight, message: '身高必须在1-200厘米之间' }
          ]"
        />

        <!-- 体重输入框 -->
        <van-field
          v-model="formData.weight"
          name="weight"
          label="体重"
          type="digit"
          placeholder="请输入体重(kg)"
          :rules="[
            { required: true, message: '请输入体重' },
            { validator: validateWeight, message: '体重必须在1-500千克之间' }
          ]"
        />

        <!-- 过敏情况 -->
        <van-field
          v-model="formData.allergyText"
          is-link
          readonly
          name="allergy"
          label="过敏情况"
          placeholder="请选择"
          @click="showAllergyPicker = true"
        />
        <van-popup v-model="showAllergyPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="allergyOptions"
            @confirm="onAllergyConfirm"
            @cancel="showAllergyPicker = false"
          />
        </van-popup>

        <!-- 血压情况 -->
        <van-field name="bloodPressure" label="血压情况">
          <template #input>
            <van-radio-group v-model="formData.bloodPressure" direction="horizontal">
              <van-radio :name="2">偏高</van-radio>
              <van-radio :name="1">偏低</van-radio>
              <van-radio :name="0">正常</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 血糖情况 -->
        <van-field name="bloodGlucose" label="血糖情况">
          <template #input>
            <van-radio-group v-model="formData.bloodGlucose" direction="horizontal">
              <van-radio :name="2">偏高</van-radio>
              <van-radio :name="1">偏低</van-radio>
              <van-radio :name="0">正常</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 口味偏好 -->
        <van-field
          v-model="formData.tasteText"
          is-link
          readonly
          name="taste"
          label="口味偏好"
          placeholder="请选择"
          @click="showTastePicker = true"
        />
        <van-popup v-model="showTastePicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="tasteOptions"
            @confirm="onTasteConfirm"
            @cancel="showTastePicker = false"
          />
        </van-popup>

        <!-- 提交按钮 -->
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :disabled="isLogin">
            保存
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { saveMedicalRecord, getMedicalRecord } from '@/api/ai'
import { Toast } from 'vant'
import loginConfirm from '@/mixins/loginConfirm'
export default {
  name: 'MedicalRecord',
  mixins: [loginConfirm],
  data () {
    return {
      formData: {
        age: '',
        sex: 1, // 默认男性
        height: '',
        weight: '',
        allergy: '',
        allergyText: '',
        bloodPressure: 0, // 默认正常
        bloodGlucose: 0, // 默认正常
        taste: '',
        tasteText: ''
      },
      showAllergyPicker: false,
      showTastePicker: false,
      allergyOptions: ['无过敏', '花粉过敏', '海鲜过敏', '药物过敏', '其他过敏'],
      tasteOptions: ['清淡', '适中', '重口味', '不吃辣', '特别能吃辣'],
      isLogin: false
    }
  },
  async created () {
    // 判断是否登录
    const isLogin = await this.loginConfirm()
    this.isLogin = isLogin
    await this.getMedicalRecord()
  },
  methods: {
    // 获取用户病例 回显表单
    async getMedicalRecord () {
      const { data } = await getMedicalRecord()
      if (!data) {
        return
      }
      // 赋值表单
      this.formData.age = data.age
      this.formData.sex = data.sex
      this.formData.height = data.height
      this.formData.weight = data.weight
      this.formData.allergyText = data.allergy
      this.formData.allergy = data.allergy
      this.formData.bloodPressure = data.bloodPressure
      this.formData.bloodGlucose = data.bloodGlucose
      this.formData.taste = data.taste
      this.formData.tasteText = data.taste
    },
    // 验证年龄
    validateAge (val) {
      const age = parseInt(val)
      return age > 0 && age <= 150
    },
    // 验证身高
    validateHeight (val) {
      const height = parseInt(val)
      return height > 0 && height <= 200
    },
    // 验证体重
    validateWeight (val) {
      const weight = parseInt(val)
      return weight > 0 && weight <= 500
    },
    // 过敏选择确认
    onAllergyConfirm (value) {
      this.formData.allergy = value
      this.formData.allergyText = value
      this.showAllergyPicker = false
    },
    // 口味选择确认
    onTasteConfirm (value) {
      this.formData.taste = value
      this.formData.tasteText = value
      this.showTastePicker = false
    },
    // 提交表单
    async onSubmit (values) {
      try {
        // TODO: 调用保存接口
        console.log('提交的表单数据：', this.formData)
        saveMedicalRecord(this.formData)
        Toast.success('保存成功')
        setTimeout(() => {
          this.$router.go(-1)
        }, 1000)
      } catch (error) {
        this.$toast.fail('保存失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.medical-record {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-top: 46px;
}

.form-content {
  padding: 16px;
}

.van-radio-group {
  display: flex;
  align-items: center;

  .van-radio {
    margin-right: 16px;
  }
}
</style>
